import { loadBase64, calcInfo, calcOrigin } from "./util.js";
import { BaseTexture, Texture, AnimatedSprite } from 'pixi.js'

export async function clipPlayer(resource, Info, behavior) {
  const {
    bodyId,
    headId,
    faceId,
    weaponId,
    hairId,
    coatId,
    pantsId,
  } = Info;
  const Textures = [];
  let animationSprite = null;
  let maxW = 0;
  let maxH = 0;

  let length = Object.keys(resource.Content.Character[bodyId][behavior]).length;
  for (let i = 0; i < length; i++) {
    const Body = resource.Content.Character[bodyId][behavior][i].body;
    // arm和body放在一块的
    const Arm = resource.Content.Character[bodyId][behavior][i].arm;
    const HeadFront = resource.Content.Character[headId].front.head;

    const Face = resource.Content.Character.Face[faceId].default.face;

    const Hair = resource.Content.Character.Hair[hairId][behavior][i].hair;
    const HairOverHead =
      resource.Content.Character.Hair[hairId][behavior][i].hairOverHead;
    const HairBelowBody =
      resource.Content.Character.Hair[hairId][behavior][i].hairBelowBody;
    const BackHair =
      resource.Content.Character.Hair[hairId][behavior][i].backHair;
    const BackHairBelowCap =
      resource.Content.Character.Hair[hairId][behavior][i].backHairBelowCap;

    const Mail = resource.Content.Character.Coat[coatId][behavior][i].mail;
    const MailArm =
      resource.Content.Character.Coat[coatId][behavior][i].mailArm;

    const Pants = resource.Content.Character.Pants[pantsId][behavior][i].pants;

    const Weapon = resource.Content.Character.Weapon[weaponId][behavior]
      ? resource.Content.Character.Weapon[weaponId][behavior][i].weapon
      : undefined;
    
    const Afterimage = resource.Content.Character.Afterimage

    let bodyImage = await loadBase64(Body.value);
    let armImage = null;
    let weaponImage = null;
    let mailArmImage = null;
    let hairImage = null;
    let backHairBelowCapImage = null;
    let backHairImage = null;
    let hairOverHeadImage = null;
    let hairBelowBodyImage = null;

    if (Arm) {
      armImage = await loadBase64(Arm.value);
    }
    if (Weapon) {
      weaponImage = await loadBase64(Weapon.value);
    }
    let headFrontImage = await loadBase64(HeadFront.value);

    let faceImage = await loadBase64(Face.value);

    if (HairOverHead) {
      hairOverHeadImage = await loadBase64(HairOverHead.value);
    }
    if (HairBelowBody) {
      hairBelowBodyImage = await loadBase64(HairBelowBody.value);
    }

    if (Hair) {
      hairImage = await loadBase64(Hair.value);
    }
    if (BackHair) {
      backHairImage = await loadBase64(BackHair.value);
    }
    if (BackHairBelowCap) {
      backHairBelowCapImage = await loadBase64(BackHairBelowCap.value);
    }

    let mailImage = await loadBase64(Mail.value);
    if (MailArm) {
      mailArmImage = await loadBase64(MailArm.value);
    }
    let pantsImage = await loadBase64(Pants.value);

    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");

    let bodyX = 0;
    let bodyY = 0;
    let armX = undefined;
    let armY = undefined;
    let weaponX = undefined;
    let weaponY = undefined;
    let mailArmX = undefined;
    let mailArmY = undefined;
    let hairX = undefined;
    let hairY = undefined;
    let hairOverHeadX = undefined;
    let hairOverHeadY = undefined;
    let hairBelowBodyX = undefined;
    let hairBelowBodyY = undefined;
    let backHairX = undefined;
    let backHairY = undefined;
    let backHairBelowCapX = undefined;
    let backHairBelowCapY = undefined;

    if (Arm) {
      armX =
        bodyX +
        Body.origin.x +
        Body.map.navel.x -
        Arm.map.navel.x -
        Arm.origin.x;
      armY =
        bodyY +
        Body.origin.y +
        Body.map.navel.y -
        Arm.map.navel.y -
        Arm.origin.y;
    }
    if (Weapon) {
      if (Weapon.map.navel) {
        weaponX =
          armX +
          Arm.origin.x +
          Arm.map.navel.x -
          Weapon.map.navel.x -
          Weapon.origin.x;
        weaponY =
          armY +
          Arm.origin.y +
          Arm.map.navel.y -
          Weapon.map.navel.y -
          Weapon.origin.y;
      } else if (Weapon.map.hand) {
        weaponX =
          armX +
          Arm.origin.x +
          Arm.map.hand.x -
          Weapon.map.hand.x -
          Weapon.origin.x;
        weaponY =
          armY +
          Arm.origin.y +
          Arm.map.hand.y -
          Weapon.map.hand.y -
          Weapon.origin.y;
      }
    }

    let headX =
      bodyX +
      Body.origin.x +
      Body.map.neck.x -
      HeadFront.map.neck.x -
      HeadFront.origin.x;
    let headY =
      bodyY +
      Body.origin.y +
      Body.map.neck.y -
      HeadFront.map.neck.y -
      HeadFront.origin.y;
    let faceX =
      headX +
      HeadFront.origin.x +
      HeadFront.map.brow.x -
      Face.map.brow.x -
      Face.origin.x;
    let faceY =
      headY +
      HeadFront.origin.y +
      HeadFront.map.brow.y -
      Face.map.brow.y -
      Face.origin.y;

    if (Hair) {
      hairX =
        headX +
        HeadFront.origin.x +
        HeadFront.map.brow.x -
        Hair.map.brow.x -
        Hair.origin.x;
      hairY =
        headY +
        HeadFront.origin.y +
        HeadFront.map.brow.y -
        Hair.map.brow.y -
        Hair.origin.y;
    }
    if (HairOverHead) {
      hairOverHeadX =
        headX +
        HeadFront.origin.x +
        HeadFront.map.brow.x -
        HairOverHead.map.brow.x -
        HairOverHead.origin.x;
      hairOverHeadY =
        headY +
        HeadFront.origin.y +
        HeadFront.map.brow.y -
        HairOverHead.map.brow.y -
        HairOverHead.origin.y;
    }
    if (HairBelowBody) {
      hairBelowBodyX =
        headX +
        HeadFront.origin.x +
        HeadFront.map.brow.x -
        HairBelowBody.map.brow.x -
        HairBelowBody.origin.x;
      hairBelowBodyY =
        headY +
        HeadFront.origin.y +
        HeadFront.map.brow.y -
        HairBelowBody.map.brow.y -
        HairBelowBody.origin.y;
    }
    if (BackHair) {
      backHairX =
        headX +
        HeadFront.origin.x +
        HeadFront.map.brow.x -
        BackHair.map.brow.x -
        BackHair.origin.x;
      backHairY =
        headY +
        HeadFront.origin.y +
        HeadFront.map.brow.y -
        BackHair.map.brow.y -
        BackHair.origin.y;
    }
    if (BackHairBelowCap) {
      backHairBelowCapX =
        headX +
        HeadFront.origin.x +
        HeadFront.map.brow.x -
        BackHairBelowCap.map.brow.x -
        BackHairBelowCap.origin.x;
      backHairBelowCapY =
        headX +
        HeadFront.origin.x +
        HeadFront.map.brow.x -
        BackHairBelowCap.map.brow.x -
        BackHairBelowCap.origin.x;
    }

    let mailX =
      bodyX +
      Body.origin.x +
      Body.map.navel.x -
      Mail.map.navel.x -
      Mail.origin.x;
    let mailY =
      bodyY +
      Body.origin.y +
      Body.map.navel.y -
      Mail.map.navel.y -
      Mail.origin.y;
    if (MailArm) {
      mailArmX =
        mailX +
        Mail.origin.x +
        Mail.map.navel.x -
        MailArm.map.navel.x -
        MailArm.origin.x;
      mailArmY =
        mailY +
        Mail.origin.y +
        Mail.map.navel.y -
        MailArm.map.navel.y -
        MailArm.origin.y;
    }

    let pantsX =
      bodyX +
      Body.origin.x +
      Body.map.navel.x -
      Pants.map.navel.x -
      Pants.origin.x;
    let pantsY =
      bodyY +
      Body.origin.y +
      Body.map.navel.y -
      Pants.map.navel.y -
      Pants.origin.y;

    
    const xArr = pushExistItem(
      bodyX,
      headX,
      faceX,
      hairX,
      hairOverHeadX,
      hairBelowBodyX,
      backHairX,
      backHairBelowCapX,
      mailX,
      pantsX,
      armX,
      weaponX,
      mailArmX
    );
    const yArr = pushExistItem(
      bodyY,
      headY,
      faceY,
      hairY,
      hairOverHeadY,
      hairBelowBodyY,
      backHairY,
      backHairBelowCapY,
      mailY,
      pantsY,
      armY,
      weaponY,
      mailArmY
    );

    let { x, y } = calcOrigin(xArr, yArr);

    bodyX += x;
    bodyY += y;
    if (Arm) {
      armX += x;
      armY += y;
    }
    if (Weapon) {
      weaponX += x;
      weaponY += y;
    }
    headX += x;
    headY += y;
    faceX += x;
    faceY += y;
    hairX += x;
    hairY += y;
    hairOverHeadX += x;
    hairOverHeadY += y;
    hairBelowBodyX += x;
    hairBelowBodyY += y;

    backHairX += x;
    backHairY += y;
    backHairBelowCapX += x;
    backHairBelowCapY += y;

    mailX += x;
    mailY += y;
    pantsX += x;
    pantsY += y;

    if (MailArm) {
      mailArmX += x;
      mailArmY += y;
    }

    let xInfo = [
      {
        value: bodyX,
        image: bodyImage,
      },
      {
        value: headX,
        image: headFrontImage,
      },
      {
        value: hairX,
        image: hairImage,
      },
      {
        value: hairOverHeadX,
        image: hairOverHeadImage,
      },
      {
        value: hairBelowBodyX,
        image: hairBelowBodyImage,
      },
      {
        value: mailX,
        image: mailImage,
      },
      {
        value: pantsX,
        image: pantsImage,
      },
      {
        value: armX,
        image: armImage,
      },
      {
        value: weaponX,
        image: weaponImage,
      },
      {
        value: mailArmX,
        image: mailArmImage,
      },
      {
        value: backHairX,
        image: backHairImage,
      },
      {
        value: backHairBelowCapX,
        image: backHairBelowCapImage
      }
    ];

    let yInfo = [
      {
        value: bodyY,
        image: bodyImage,
      },
      {
        value: headY,
        image: headFrontImage,
      },
      {
        value: hairY,
        image: hairImage,
      },
      {
        value: hairOverHeadY,
        image: hairOverHeadImage,
      },
      {
        value: hairBelowBodyY,
        image: hairBelowBodyImage,
      },
      {
        value: mailY,
        image: mailImage,
      },
      {
        value: pantsY,
        image: pantsImage,
      },
      {
        value: armY,
        image: armImage,
      },
      {
        value: weaponY,
        image: weaponImage,
      },
      {
        value: mailArmY,
        image: mailArmImage,
      },
      {
        value: backHairY,
        image: backHairImage,
      },
      {
        value: backHairBelowCapY,
        image: backHairBelowCapImage,
      }
    ];

    const { width, height } = calcInfo(xInfo, yInfo);
    canvas.width = width;
    canvas.height = height;

    drawExistImage(ctx, hairBelowBodyImage, hairBelowBodyX, hairBelowBodyY);
    drawExistImage(ctx, bodyImage, bodyX, bodyY);
    drawExistImage(ctx, headFrontImage, headX, headY);
    drawExistImage(ctx, faceImage, faceX, faceY);
    drawExistImage(ctx, hairImage, hairX, hairY);
    
    drawExistImage(ctx, hairOverHeadImage, hairOverHeadX, hairOverHeadY);
    drawExistImage(ctx, mailImage, mailX, mailY);
    drawExistImage(ctx, pantsImage, pantsX, pantsY);
    
    drawExistImage(ctx, weaponImage, weaponX, weaponY);
    drawExistImage(ctx, armImage, armX, armY);
    drawExistImage(ctx, mailArmImage, mailArmX, mailArmY);
    // drawExistImage(ctx, backHairBelowCapImage, backHairBelowCapX, backHairBelowCapY);
    drawExistImage(ctx, backHairImage, backHairX, backHairY);

    let clip = canvas.toDataURL("image/png");
    let newImage = await loadBase64(clip, false);
    let base = new BaseTexture(newImage);
    let texture = new Texture(base);
    // texture.defaultAnchor.set( (bodyImage.width / 2 + bodyX) / width, (bodyImage.height / 2 + bodyY) / height);
    // texture.defaultAnchor.set(1, 1);
    texture.info = {
      x: x + Body.origin.x,
      y: y + Body.origin.y,
    };
    texture.defaultAnchor.x = (x + Body.origin.x) / newImage.width;
    texture.defaultAnchor.y = (y + Body.origin.y) / newImage.height;
    Textures.push(texture);
  }

  animationSprite = new AnimatedSprite(Textures);
  // animationSprite.y += animationSprite.height;
  animationSprite.zIndex = 100000;
  return animationSprite;
}

function pushExistItem(...items) {
  const array = [];
  items.forEach((item) => {
    item ? array.push(item) : undefined;
  });
  return array;
}

function drawExistImage(ctx, image, x, y, width, height) {
  
    if (image) {
      if (arguments.length === 4) {
        ctx.drawImage(image, x, y);
      } else if (arguments.length === 6) {
        
        ctx.drawImage(image, x, y, width, height);
      }
    }
}